<template>
    <div id="app">
        <div style="padding: 20px;text-align: left">
            <el-button-group>
            <el-button type="primary" :loading="loading" @click="createroleDialog=true">创建用户角色</el-button>
            </el-button-group>
        </div>
        <el-table :data="roles.item" v-loading="loading2"
          style="width:100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column prop="id" align="center" label="角色编号">
            </el-table-column>
            <el-table-column prop="roleName" align="center" label="角色名称">
            </el-table-column>
            <el-table-column prop="roleNameEn" align="center" label="角色英文名">
            </el-table-column>
            <el-table-column prop="status" align="center" label="状态">
                <template slot-scope="scope">
                <el-tag :type="scope.row.status == 1 ? 'success' : 'danger' " close-transition>
                  {{scope.row.status== 1 ? "激活": "无效"}}
                </el-tag>
              </template>
            </el-table-column>
        </el-table>
        <el-dialog title="创建角色" :visible.sync="createroleDialog" center>
          <el-form :model="role">
            <el-form-item label="角色名称">
              <el-input v-model="role.roleName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色英文名称">
              <el-input v-model="role.roleNameEn" auto-complete="off"></el-input>
            </el-form-item>
         </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="createroleDialog = false">取消</el-button>
            <el-button type="primary" @click="addRole()">确定</el-button>
          </span>
        </el-dialog>
    </div>
</template>
<script>
    import _ from 'lodash'
    import axios from 'axios'
    export default {
      name: 'roleManagement',
      data() {
        return {
          roles: {
            total: 0,
            pageNumber: 1,
            pageSize: 20,
            item: []
          },
          role: {
            roleName: '',
            roleNameEn: '',
            status: ''
          },
          loading: false,
          createroleDialog: false,
          loading2: false,
          multipleSelection: [],
          processing: false,
          name: 'import',
          currentPageNumber: 1
        }
      },
      mounted: function() {
        this.getRoleList()
      },
      methods: {
        handleSizeChange: function(val) {
          this.loading2 = true
        },
        getRoleList: function() {
          this.loading2 = true
          axios.post('/api/teachers/roleList').then(response => {
            this.roles.item = response.data.result
            this.loading2 = false
          }).catch(error => {
            console.log(error)
            this.loading2 = false
          })
        },
        handleCurrentChange: function(val) {
          this.loading2 = true
          this.currentPageNumber = val
        },
        handleSelectionChange: function(val) {
          const that = this
          that.multipleSelection = []
          _.each(val, function(value, key) {
            // ids += value.CODE + ','
            that.multipleSelection.push(value.CODE)
            that.id = value.ID
            that.tt.code = value.CODE
            that.tt.name = value.NAME
            that.gender = 1
            // console.log(value)
          })
          // this.multipleSelection = ids
        },
        addRole: function() {
          const formData = new FormData()
          formData.append('roleName', this.role.roleName)
          formData.append('roleNameEn', this.role.roleNameEn)
          axios.post('/api/teachers/createRole', formData).then(response => {
            if (response.data.result === 'success') {
              this.$message.success('创建角色成功')
              this.createroleDialog = false
              this.loading = false
              this.getRoleList()
            } else {
              this.$message.error('角色已存在，请勿重复创建')
              this.createroleDialog = false
              this.loading = false
            }
          }).catch(error => {
            console.log(error)
            this.loading = false
          })
        },
        refetchCurrentPage: function() {
          this.loading2 = true
        }
      }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  #app {
        margin: 50px;
    }
  #searchConditions{
        border:1px solid;
        padding:10px;
    }
  table {
        font-size:12px;
        line-height:10px;
    }
  .upload {
        border:1px solid;
        margin:50px;
        padding:20px;
    }
</style>

<style rel="stylesheet/scss" lang="scss">
 a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
</style>